<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="/api/favicon">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/front/answer.css' %}">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <title>大学生心理健康评估</title>
</head>
<body>
<div id="app">
    <header class="header">
        <h3>大学生心理健康评估--{{ title }}</h3>
    </header>
    <main class="main">
        <el-collapse-transition>
            <div class="tips" v-show="state === 1">
                <h3>测试指导语:</h3>
                <p>{{ tips }}</p>
                <h3>适用对象:</h3>
                <p>{{ apply }}</p>
                <div>
                    <el-button type="warning" @click="state = 2">开始测试</el-button>
                </div>
            </div>
        </el-collapse-transition>
        <el-collapse-transition>
            <el-steps :active="step" simple class="step" finish-status="success" v-show="state === 2">
                {% for r in resutl %}
                    <el-step title="{{ r.title }}"></el-step>
                {% endfor %}
            </el-steps>
        </el-collapse-transition>
        <el-collapse-transition>
            <div class="content" v-show="state === 2">
                <h3>[[ qid+1 ]]. [[ quizzes[steps].quizzes[qid].title ]]</h3>
                <el-radio-group v-model="quizzes[steps].quizzes[qid].value" @change="change">
                    {% for option in options %}
                        <el-radio :label="{{ option.value }}">{{ option.label }}</el-radio>
                    {% endfor %}
                </el-radio-group>
                <div class="questions_step">[[ qid+1 ]] / [[ quizzes[steps].quizzes.length ]]（题）</div>
                <div class="btns">
                    <el-button icon="el-icon-arrow-left" @click="last">上一题</el-button>
                    <el-button @click="next">[[ finish ]]<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </div>
            </div>
        </el-collapse-transition>
        <el-collapse-transition>
            <div v-show="state === 3" class="chart">
                <h2>测 试 结 果</h2>
                <div class="chart1" id="chart1"></div>
                <div class="chart2" id="chart2"></div>
                <div class="btns">
                    <el-button icon="el-icon-refresh-right" type="primary" @click="again">再测一次</el-button>
                    <el-button icon="el-icon-house" type="primary" @click="to_index">返回首页</el-button>
                </div>
            </div>
        </el-collapse-transition>
    </main>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            tid:{{ tid }},
            steps: 0,  // 进度
            step: 0,
            state: 1,
            quizzes:{{ quizzes|safe }},
            qid: 0,
            option1: {
                title: {
                    text: '{{ title }}'
                },
                tooltip: {},
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 4,
                            padding: [5, 10],
                            fontSize: 16,
                        }
                    },
                    indicator: []
                },
                series: [{
                    name: '{{ title }}',
                    type: 'radar',
                    areaStyle: {},
                    data: [
                        {
                            value: [],
                            name: '{{ title }}'
                        }
                    ]
                }]
            },
            verdict:{{ resutl|safe }},
            option2: {
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: []
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        let htmlStr = ""
                        console.log(vm.verdict[params[0].dataIndex])
                        htmlStr += '<h3 style="line-height: 30px">' + vm.verdict[params[0].dataIndex].title + ' : <span style="font-size: 14px">' + params[0].data + '</span></h3>'
                        htmlStr += '<p style="width: 200px;white-space: normal">' + vm.verdict[params[0].dataIndex].trait + '</p>'
                        return htmlStr
                    }
                },
                series: [{
                    data: [],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            },
        },
        computed: {
            finish() {
                if (this.steps === this.quizzes.length - 1 && this.qid === this.quizzes[this.steps].quizzes.length - 1) {
                    return '提交'
                } else {
                    return '下一题'
                }

            },
        },
        mounted: function () {
            {#初始胡图表#}
            this.myChart1 = echarts.init(document.getElementById('chart1'));
            this.myChart2 = echarts.init(document.getElementById('chart2'));
        },
        methods: {
            {#等待选中动画#}
            change() {
                setTimeout(() => {
                    this.next()
                }, 100)
            },
            {#下一题#}
            next() {
                if (this.quizzes[this.steps].quizzes[this.qid].value === '') {
                    this.$message({
                        offset: 50,
                        message: '尚未完成答题 ╮（╯＿╰）╭',
                        type: 'warning'
                    });
                    return
                }
                if (this.qid < this.quizzes[this.steps].quizzes.length - 1) {
                    this.qid += 1
                } else {
                    if (this.steps < this.quizzes.length - 1) {
                        this.steps += 1
                        this.step += 1
                        this.qid = 0
                    } else {
                        this.$confirm('此操作将提交问卷, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            });
                            this.step += 1
                            this.state = 3
                            this.statistical_result()
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '取消提交！'
                            });
                        });
                    }
                }
            },
            {#上一题#}
            last() {
                if (this.qid > 0) {
                    this.qid -= 1
                } else {
                    if (this.steps > 0) {
                        this.steps -= 1
                        this.step -= 1
                        this.qid = this.quizzes[this.steps].quizzes.length - 1
                    } else {
                        this.$message({
                            offset: 50,
                            message: '已经是第一题了哦 (⊙﹏⊙)',
                            type: 'warning'
                        });
                    }
                }
            },
            {#统计结果#}
            statistical_result() {
                let max = 0
                let min = 0
                for (let item of this.quizzes) {
                    let r = {
                        title: item.title,
                        value: 0
                    }
                    for (let t of item.quizzes) {
                        r.value += t.value
                    }
                    if (r.value > max) {
                        max = r.value
                    }
                    if (r.value < min) {
                        min = r.value
                    }
                    this.option1.series[0].data[0].value.push(r.value)
                    this.option2.yAxis.data.push(r.title)
                    this.option1.radar.indicator.push({name: r.title, max: max + 5, min: min - 5})
                    this.option2.series[0].data.push(r.value)
                }
                this.myChart1.setOption(this.option1, true);
                this.myChart2.setOption(this.option2, true);
                let params = new FormData;
                params.append('radar', JSON.stringify({
                    title: this.option1.title,
                    series: this.option1.series,
                    radar: this.option1.radar
                }))
                params.append('bar', JSON.stringify({
                    yAxis: this.option2.yAxis,
                    radar: this.option2.series,
                    verdict: this.verdict
                }))
                params.append('tid', this.tid)
                axios.post('', params).then(res => {
                    console.log(res.data)
                })
            },
            {#再次测试#}
            again() {
                location.reload();
            },
            {#返回首页#}
            to_index() {
                window.location.href = '/'
            }
        }
    });
</script>
</body>
</html>